<template>
    <div>

        <div class="toolbar">
            <el-form :inline="true" :model="q" size="mini">

                <el-form-item label="时间:">
                    <el-date-picker v-model="q.start_day" value-format="yyyy-MM-dd" type="date"
                                    :picker-options="pickerOptions" placeholder="选择日期"></el-date-picker>
                    <span>-</span>
                    <el-date-picker v-model="q.end_day" value-format="yyyy-MM-dd" type="date"
                                    :picker-options="pickerOptions" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="渠道号:">
                    <more-selete v-if="getChnList &&restInit" :dataList="getChnList" @checkedMore="q.channel_names= $event"></more-selete>
                </el-form-item>
                <el-form-item label="所属主管:" >
                    <more-selete v-if="managerArray&&restInit" :dataList="managerArray" @checkedMore="q.manage_list= $event"></more-selete>
                </el-form-item>
                <el-form-item label="所属组长:" >
                    <more-selete v-if="leaderArray&&restInit" :dataList="leaderArray" @checkedMore="q.leader_list= $event"></more-selete>
                </el-form-item>
                <el-form-item label="所属组员:"  >
                    <more-selete v-if="staffArray&&restInit" :dataList="staffArray" @checkedMore="q.staff_list= $event"></more-selete>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button type="danger" @click="reload">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-row type="flex" class="row-bg btn-row" justify="end">
            <el-button  size="mini"  type="primary" @click="downloadData"   icon="el-icon-download">导出数据</el-button>
        </el-row>
        <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit highlight-current-row>
            <el-table-column prop="day" label="日期" width="100"></el-table-column>
            <el-table-column prop="manager" label="所属主管"></el-table-column>
            <el-table-column prop="leader" label="所属组长"></el-table-column>
            <el-table-column prop="staff" label="所属组员"></el-table-column>
            <el-table-column prop="channel" label="渠道号"  width="150"></el-table-column>
            <el-table-column prop="register_count" label="激活" sortable></el-table-column>
            <el-table-column prop="bind_count" label="注册" sortable></el-table-column>
            <el-table-column prop="first_recharge_user" label="首充人数" width="100" sortable></el-table-column>
            <el-table-column prop="first_recharge_count" label="首充金额" width="100" sortable></el-table-column>
            <el-table-column prop="recharge_new_user" label="新充人数" width="100" sortable></el-table-column>
            <el-table-column prop="recharge_new_amount" label="新充金额" width="100" sortable></el-table-column>
            <el-table-column prop="recharge_user" label="充值人数" width="100" sortable></el-table-column>
            <el-table-column prop="recharge_amount" label="充值金额" width="100" sortable>
                <template slot-scope="scope">{{scope.row.recharge_amount}}</template>
            </el-table-column>
            <el-table-column prop="agency_recharge" label="代理充值" width="100" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.agency_recharge">{{(scope.row.agency_recharge)}}</span><span v-else>0</span>
                </template>
            </el-table-column>
            <el-table-column prop="online_recharge" label="在线充值" width="100" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.online_recharge">{{(scope.row.online_recharge)}}</span><span v-else>0</span>
                </template>
            </el-table-column>
            <el-table-column prop="withdraw_amount" label="提现" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.withdraw_amount">{{(scope.row.withdraw_amount)}}</span><span v-else>0</span>
                </template>
            </el-table-column>
            <el-table-column prop="true_profit" label="营收" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.true_profit">{{(scope.row.true_profit)}}</span><span v-else>0</span>
                </template>
            </el-table-column>
            <el-table-column prop="real_channel_tax_amount" label="渠道税收"  width="140px">
                <template slot-scope="scope">{{scope.row.real_channel_tax_amount}}</template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                            :page-size="q.page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listData.total">
            </el-pagination>
        </div>
        <save-update  v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :rolelist="rolelist"></save-update>
    </div>
</template>

<script>
    import { getDailyDataList, getChnOptions } from '@/api'
    import MoreSelete from '@/components/MoreSelete/index'
    import {queryFilter} from '@/utils/patch'
    import { AppModule } from '@/store/modules/app';
    import timedate from '@/utils/timedate'
    export default {
        components: {MoreSelete},
        data() {
            return {
                restInit: true,
                listData: {},
              q: {page_size: 30, page_no: 1, order_by: '-day', start_day: timedate.dateYesterday, end_day: timedate.dateToday},
                listLoading: false,
                showUpdate: false,
                show_id: null,
                stafflist: [],
                leaderlist: [],
                staffArray: [],
                leaderArray: [],
                managerlist: [],
                managerArray: [],
                roles:[],
                uaStatus:{
                    ios:'ios',
                    android:'android'
                },
              pickerOptions: {
                disabledDate(time) {
                  return time.getTime() > Date.now() - 8.64e6
                }
              },
              getChnList:null,
            }
        },
        created() {
            this.getStaffList();
            this.getLeaderList();
            this.getManagerList();
            this.getroles();
          this.getchnList()
        },
        mounted(){
            this.getList()
        },
        computed: {
            index_mapper(){
                return AppModule.index_mapper
            }
        },
        deactivated(){
            this.listLoading = false
        },
        methods: {

          async getchnList(){
            await getChnOptions({data_type: 'channel'}).then(res => {
              if(res.status === 0){
                this.getChnList = res.data
              }
            })
          },
            async getLeaderList(){
                await getChnOptions({data_type: 'leader'}).then(res => {
                    if(res.status === 0){
                        this.leaderlist = res.data
                        this.leaderArray = []
                        this.leaderlist.map(item => {
                            this.leaderArray.push(item.name)
                        })
                    }
                })
            },
            async getStaffList(){
                await getChnOptions({data_type: 'staff'}).then(res => {
                    if(res.status === 0){
                        this.stafflist = res.data
                        this.staffArray = []
                        this.stafflist.map(item => {
                            this.staffArray.push(item.name)
                        })
                    }
                })
            },
            async getManagerList(){
                await getChnOptions({data_type: 'manager'}).then(res => {
                    if(res.status === 0){
                        this.managerlist = res.data
                        this.managerArray = []
                        this.managerlist.map(item => {
                            this.managerArray.push(item.name)
                        })
                    }
                })
            },
            getroles(){
                this.roles=this.$store.state.user.roles.map(item=>{
                    return item.id
                })
            },
            downloadData(){
                let queryObj = queryFilter(this.q)
                let data = Object.assign({},queryObj,{ to_export_file: true})
              getDailyDataList(data).then(res => {
                    if (res.status === 0) {
                        window.location.href = window.location.origin + res.data.url
                    }
                })
            },
            add(){
                this.show_id = null
                this.showUpdate = true
            },
            update(row){
                this.show_id = row.id
                this.showUpdate = true
            },
            remove(row){
                this.$confirm(`确认删除ID为${row.id}的项么？`, '删除用户', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            query(){
                this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
                this.getList()
            },
            reload() {
              this.restInit = false
              this.$nextTick(() => (this.restInit = true))
              this.q = {page_size: 30, page_no: 1, order_by: '-day', start_day: timedate.dateYesterday, end_day: timedate.dateToday}
              this.getList()
            },
            sortlist(sort){
                if( this.q.order_by&&this.q.order_by==='-'+sort.prop){ delete this.q.order_by}
                else{
                this.q.order_by=this.q.order_by===sort.prop&& "-"+sort.prop||sort.prop}
                this.getList()
            },
            handleSizeChange (val) {
                this.q.page_size = val
                this.getList()
            },
            handleCurrentChange (val) {
                this.q.page_no = val
                this.getList()
            },
            async getList(){
                let queryObj = queryFilter(this.q)
                await  getDailyDataList(queryObj).then(res => {
                    if(res.status === 0){
                        this.listLoading = false
                        this.listData = res.data
                    }
                }).catch(()=>{
                    console.log('超时')
                })
            },
        },
        watch: {
            showUpdate() {
                if(!this.showUpdate){
                    this.getList()
                }
            }
        }
    }
</script>
